<script  lang="ts">
import CampaignEdit from './CampaignEdit.vue';

export const modCampaignPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./CampaignEdit.mod.vue')),
  {
    title: computed(() => $t('fvaTnHjIYkyoYrXiFUuuS')),
    wrapClassName: 'ant-cover__Modal-drawer __screen-drawer',
    centered: true,
    footer: null,
  },
);
</script>

<script lang="ts" setup>
const props = defineProps<{
  id: string;
}>();
const emits = defineEmits<{
  close: [];
}>();

const channelDetailQry = useQuery({
  queryKey: [apis.apiInviteChannelDetail.id, toRef(props, 'id')],
  queryFn: () => apis.apiInviteChannelDetail({ channel_id: props.id }),
});
const channelDetail = computed(() => (channelDetailQry.data.value));
const channelUpdateMut = useMutation({
  mutationKey: [apis.apiInviteUpdateChannel.id, toRef(props, 'id')],
  mutationFn: apis.apiInviteUpdateChannel.setDefaultConfig({ successMessage: $t('zsaLk1KtXyRrJmdsq5Jo2') }),
});

async function confirm(data: VueEmitParam<typeof CampaignEdit, 'confirm'>) {
  await channelUpdateMut.mutateAsync({ requestBody: { ...data, channel_id: props.id } });
  queryClient.invalidateQueries({ queryKey: [apis.apiInviteChannelDetail.id, props.id] });
  queryClient.invalidateQueries({ queryKey: [apis.apiInviteChannel.id], exact: false });
  emits('close');
}
</script>

<template>
  <div>
    <CampaignEdit
      :detail="channelDetail ?? undefined"
      :loading="channelDetailQry.isLoading.value || channelUpdateMut.isPending.value"
      @confirm="confirm"
    />
  </div>
</template>

<!-- @vue:mounted="() => console.log('mounted')" -->
